<script setup lang="ts">
import { ref } from 'vue';
import { QrcodeOutlined, NumberOutlined, WifiOutlined, ApiOutlined, UsbOutlined, MobileOutlined, LaptopOutlined } from '@ant-design/icons-vue';
import type { DeviceInfo, ConnectionMethod } from '../types';

const devices = ref<DeviceInfo[]>([]);
const activeMethod = ref<ConnectionMethod>('qr');
const connectionCode = ref('');
const isScanning = ref(false);

const connectionMethods: { type: ConnectionMethod; label: string; icon: any }[] = [
  { type: 'qr', label: '二维码连接', icon: QrcodeOutlined },
  { type: 'code', label: '连接码', icon: NumberOutlined },
  { type: 'lan', label: 'WLAN', icon: WifiOutlined },
  { type: 'bluetooth', label: '蓝牙', icon: ApiOutlined },
  { type: 'usb', label: 'USB', icon: UsbOutlined }
];

const mockDevices: DeviceInfo[] = [
  {
    id: '1',
    name: 'iPhone 13',
    type: 'mobile',
    connectionType: 'lan',
    status: 'available',
    platform: 'ios',
    lastSeen: new Date().toISOString()
  },
  {
    id: '2',
    name: 'MacBook Pro',
    type: 'desktop',
    connectionType: 'lan',
    status: 'connected',
    platform: 'macos',
    lastSeen: new Date().toISOString()
  }
];

const startScanning = () => {
  isScanning.value = true;
  setTimeout(() => {
    devices.value = mockDevices;
    isScanning.value = false;
  }, 2000);
};

const connectWithCode = () => {
  if (!connectionCode.value) return;
  // 模拟连接过程
  isScanning.value = true;
  setTimeout(() => {
    const newDevice: DeviceInfo = {
      id: crypto.randomUUID(),
      name: '未知设备',
      type: 'desktop',
      connectionType: 'code',
      status: 'connected',
      lastSeen: new Date().toISOString()
    };
    devices.value.unshift(newDevice);
    connectionCode.value = '';
    isScanning.value = false;
  }, 1500);
};
</script>

<template>
  <div class="device-discovery">
    <div class="methods-card">
      <div class="methods-grid">
        <div
          v-for="method in connectionMethods"
          :key="method.type"
          :class="['method-item', { active: activeMethod === method.type }]"
          @click="activeMethod = method.type"
        >
          <div class="method-icon">
            <component :is="method.icon" />
          </div>
          <div class="method-label">{{ method.label }}</div>
        </div>
      </div>
    </div>

    <div class="content-area">
      <!-- 二维码连接 -->
      <template v-if="activeMethod === 'qr'">
        <div class="qr-section">
          <div class="qr-code">
            <qrcode-outlined class="mock-qr" />
          </div>
          <a-typography-text type="secondary" class="qr-hint">
            使用手机扫描二维码连接
          </a-typography-text>
        </div>
      </template>

      <!-- 连接码连接 -->
      <template v-if="activeMethod === 'code'">
        <div class="code-section">
          <div class="input-wrapper">
            <a-input-search
              v-model:value="connectionCode"
              placeholder="输入6位连接码"
              size="large"
              :maxLength="6"
              :loading="isScanning"
              @search="connectWithCode"
            >
              <template #enterButton>
                <a-button type="primary" size="large">连接</a-button>
              </template>
            </a-input-search>
          </div>
        </div>
      </template>

      <!-- WLAN/蓝牙/USB连接 -->
      <template v-else>
        <div class="scan-section">
          <a-button 
            type="primary"
            size="large"
            :loading="isScanning"
            @click="startScanning"
          >
            {{ isScanning ? '扫描中...' : '扫描设备' }}
          </a-button>
        </div>
      </template>

      <!-- 设备列表 -->
      <template v-if="devices.length">
        <a-divider>可用设备</a-divider>
        <a-list :data-source="devices" :grid="{ gutter: 16, column: 2 }">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-card :bordered="false" :class="['device-card', { connected: item.status === 'connected' }]">
                <template #avatar>
                  <component :is="item.type === 'mobile' ? MobileOutlined : LaptopOutlined" />
                </template>
                <a-card-meta :title="item.name">
                  <template #description>
                    <a-space>
                      <span>{{ item.platform || '未知平台' }}</span>
                      <a-badge :status="item.status === 'connected' ? 'success' : 'processing'" />
                    </a-space>
                  </template>
                </a-card-meta>
                <template #extra>
                  <a-button 
                    :type="item.status === 'connected' ? 'primary' : 'default'"
                    :disabled="item.status === 'connected'"
                  >
                    {{ item.status === 'connected' ? '已连接' : '连接' }}
                  </a-button>
                </template>
              </a-card>
            </a-list-item>
          </template>
        </a-list>
      </template>
    </div>
  </div>
</template>

<style scoped>
.device-discovery {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.methods-card {
  background: var(--bg-light);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.methods-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.method-item {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.method-item.active {
  border-color: var(--primary-color);
  background: rgba(24, 144, 255, 0.1);
}

.method-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--text-secondary);
}

.method-label {
  font-size: 1rem;
  color: var(--text-primary);
}

.active .method-icon {
  color: var(--primary-color);
}

.active .method-label {
  color: var(--primary-color);
}

.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.code-section {
  width: 100%;
  max-width: 400px;
  margin: 2rem auto;
}

.input-wrapper {
  width: 100%;
}

.input-wrapper :deep(.ant-input-search) {
  width: 100%;
}

.input-wrapper :deep(.ant-input-search .ant-input) {
  height: 40px;
  font-size: 1rem;
}

.input-wrapper :deep(.ant-input-search .ant-btn) {
  height: 40px;
  font-size: 1rem;
}

.scan-section {
  margin: 2rem 0;
}

.qr-section {
  text-align: center;
  margin: 2rem 0;
}

.qr-code {
  width: 200px;
  height: 200px;
  margin: 0 auto 1rem;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.mock-qr {
  font-size: 100px;
  color: var(--text-secondary);
}

.qr-hint {
  display: block;
  margin-top: 1rem;
}

.device-card {
  margin-bottom: 1rem;
}

.device-card.connected {
  background: rgba(24, 144, 255, 0.05);
}
</style> 